<apes-header>
  <apes-button-list class="buttonList" [ctx]="ctx" [buttonBarMetadata]="buttonBar"
                    (click)="onEvent($event)"></apes-button-list>
</apes-header>

<apes-content>
  <apes-card [apesBordered]="false" id="pdf">
    <!-- 查询条件(固定) -->
    <div>
      <!-- 日期 -->
      <div apes-col [apesMd]="16">
        <div style="display: flex;">
          <apes-form-item style="margin-bottom: 0">
            <apes-form-label  apes-col [apesMd]="6" apesRequired>日期</apes-form-label>
            <apes-form-control  apes-col [apesMd]="18" >
              <apes-range-picker [(ngModel)]="timeList" [apesFormat]="'yyyy-MM-dd'"></apes-range-picker>
            </apes-form-control>
          </apes-form-item>
          <div style=" margin-left: 15px">
            <button apes-button
                    [apesSize]="'default'"
                    *ngFor="let item of but"
                    (click)="_submit(item.value)">
              近{{ item.value }}天
            </button>
          </div>
        </div>
      </div>
      <!-- 供应商 -->
      <div apes-col [apesMd]="16" >
        <apes-form-item style="margin-bottom: 0">
          <apes-form-label  apes-col [apesMd]="2" apesRequired>供应商</apes-form-label>
          <apes-form-control  apes-col [apesMd]="8">
            <ng-select clearAllText
                       [items]="supplier"
                       bindLabel="GYSMC"
                       bindValue="GYSID"
                       [searchable]="true"
                       [placeholder]="'必选'"
                       [notFoundText]="'无法找到'"
                       typeToSearchText
                       [(ngModel)]="supplierID">
            </ng-select>
          </apes-form-control>
        </apes-form-item>
      </div>
    </div>
    <!-- 显示内容 -->
   <div apes-col>
     <div apes-col [apesMd]="24" style="text-align: center">
       <h3>{{ supplierName }}</h3>
     </div>

     <div apes-col [apesMd]="12" *ngFor="let item of pieData" [class.pie]="item.pieData.length === 0" >
       <apes-card [apesTitle]="topSalesTitle"
                  [apesBodyStyle]="{'padding.px': 24}"
                  style="min-height: 200px; overflow: hidden;">
         <ng-template #topSalesTitle>
           {{ item.title }}
           <small class="text-sm font-weight-normal" style="color: red">
             <span *ngIf="item.label !== undefined && item.key !== undefined">
               {{ item.label }} : {{ item.key }}
             </span>
             <span  style="margin-left: 15px" *ngIf="item.labelTwo !== undefined && item.keyTwo !== undefined">
               {{ item.labelTwo }} : {{ item.keyTwo }}
             </span>
           </small>
         </ng-template>
         <apes-card [apesBordered]="false" *ngIf="item.title === '品牌件报价分析'" style="position: absolute">
           <table border="1" cellpadding="8">
             <tr>
               <th>类型</th>
               <th>报价数</th>
               <th>推荐数</th>
               <th>推荐率</th>
             </tr>
             <tr *ngFor="let body of brandData">
               <td>{{body['TYPE']}}</td>
               <td>{{body['BJS']}}</td>
               <td>{{body['TJS']}}</td>
               <td>{{body['ZB']}}</td>
             </tr>
           </table>
         </apes-card>
         <apes-card [apesBordered]="false" *ngIf="item.title === '报价时效分析'" >
           <table border="1" cellpadding="7" width="80%" style="text-align: center">
             <tr>
               <th>类型</th>
               <th>推送报价数/单</th>
               <th>完成报价</th>
               <th>超时</th>
               <th>未报价</th>
             </tr>
             <tr *ngFor="let body of item.pieData">
               <td>{{body['TYPE']}}</td>
               <td>{{body['TSBJS']}}</td>
               <td>{{body['WCBJ']}}</td>
               <td>{{body['CSSL']}}</td>
               <td>{{body['WWCBJ']}}</td>
             </tr>
           </table>
         </apes-card>
         <apes-pie *ngIf="item.title !== '报价时效分析'"
                   class="pie-legend"
                   [hasLegend]="item.hasLegend"
                   [height]="200" [inner]="0"
                   [lineWidth]="1"
                   [label]="item.title !== '品牌件报价分析' ? false : true"
                   [class.pieLeft]="item.title === '品牌件报价分析'"
                   [data]="item.pieData"></apes-pie>
       </apes-card>
     </div>

     <div apes-col [apesMd]="24">
       <apes-card [apesBodyStyle]="{'padding.px': 24}" style="min-height: 200px;" [apesBordered]="newData.length < 1 ? false : true">
         <div id="pieNode"></div>
       </apes-card>
     </div>
   </div>
  </apes-card>
</apes-content>

